<template>
  <div>
     <el-menu

  class="el-menu-demo"
  mode="horizontal"

  background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b">
  <el-menu-item ><i class="el-icon-s-home"></i>订单管理</el-menu-item>
  <!--  -->
  <el-menu-item index="/adminsSystem/xOrders/xOutOrdersList"><i class="el-icon-user"></i>退单列表</el-menu-item>
  <!-- <el-menu-item index="/system/xOrders/xOrdersList"><i class="el-icon-s-operation"></i>我的客户订单列表</el-menu-item> -->
  
</el-menu>
    <h3 style="text-align:left">退保列表:</h3>
    <div class="companyContent">
      <!--  -->
      <el-table :data="outOrdersData" stripe border style="width: 100%">
        <el-table-column fixed prop="_id" label="_id" width="250">
        </el-table-column>
        <el-table-column prop="oneOrdersId.flowNum" label="订单流水" width="150">
        </el-table-column>
        <el-table-column
          prop="oneOrdersId.customersId.customersName"
          label="客户姓名"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="oneOrdersId.customersId.customersPhone"
          label="客户电话"
          width="120"
        >
        </el-table-column>
        <!-- <el-table-column
          prop="oneOrdersId.productsId.classesId.insuresTypeName"
          label="保险类别"
          width="120"
        >
        </el-table-column> -->
        <el-table-column
          prop="oneOrdersId.productsId.productsName"
          label="产品"
          width="120"
        >
        </el-table-column>
        <!-- <el-table-column prop="productsId.price" label="价格" width="120">
        </el-table-column> -->
        <!-- <el-table-column label="订单状态" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.state == 1">未支付</span>
            <span v-if="scope.row.state == 2">已支付</span>
            <span v-if="scope.row.state == 3">待支付</span>
          </template>
        </el-table-column> -->
        <!-- <el-table-column prop="oneOrdersId.dealTime" label="下单时间" width="120">
        </el-table-column> -->
        <!-- <el-table-column prop="saleMenId.name" label="所属销售" width="120">
        </el-table-column> -->
         <el-table-column
          prop="reasonOutOrders"
          label="退保原因"
          width="120"
        >
        </el-table-column>
         <el-table-column
          prop="otherText"
          label="销售备注"
          width="120"
        >
        </el-table-column>
         <el-table-column
          prop="outOrdersState"
          label="审核状态"
          width="120"
        >
       
         <template slot-scope="scope">
            <span v-if="scope.row.outOrdersState == 1" style="color:red">待审核</span>
            <span v-if="scope.row.outOrdersState == 2" style="color:green">审核通过</span>
            <span v-if="scope.row.outOrdersState == 3" style="color:red">拒绝</span>
          </template>
        </el-table-column>
         <el-table-column
         
          label="操作"
          width="180"
        > 
        <!-- v-if -->
        
        <template slot-scope="scope"> 
          <el-button  type="success" size="small" style="margin:5px 5px" @click="passOut(scope.row._id,scope.row.oneOrdersId)" 
            :disabled="(scope.row.outOrdersState == 2 || scope.row.outOrdersState==3) ? true : false">通过</el-button> 
          <el-button @click="notPassOut(scope.row._id,scope.row.oneOrdersId)" type="danger" size="small" 
            :disabled="(scope.row.outOrdersState == 2 || scope.row.outOrdersState==3) ? true : false">拒绝</el-button>
        </template>
        <!-- v-else -->
         <!-- <template slot-scope="scope" v-else>
          <el-button  type="success" size="small" style="margin:5px 5px" @click="passOut(scope.row._id,scope.row.oneOrdersId)">通过</el-button> 
          <el-button @click="notPassOut(scope.row._id,scope.row.oneOrdersId)" type="danger" size="small" >拒绝</el-button>
        </template> -->
        </el-table-column>
        <!-- <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              style="color:#009688;"
              @click="lookOrders(scope.row._id)"
              >查看详情</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <!--  -->
    </div>
    <!--  -->
    <!-- <h3 style="text-align:left">退保原因:</h3>
    <div><span></span></div> -->

   
    
     
   

  
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
  "orders"
);
export default {
  data() {
    return {
     
    };
  },
  mounted() {
    // //  this.getOrdersByOrdersId({_id:localStorage.oneOrdersId});  // 所点击的订单id传过去
    this.getOutOrders(); // 所点击的订单id传过去
  },
  computed: {
    ...mapState(["outOrdersData"]),
  },
  methods: {
    ...mapActions(["getOutOrders",'oneModifyOrders','modifyOutOrdersState','passoutState' ]),
    lookOrders(_id) {
      // 传送该订单的id
      // console.log({_id});
      this.getOrdersByOrdersId({ _id });
      // 获取个人订单详情
      this.$router.push("/adminsSystem/xOrders/xOneOrdersDetails");
    },
   async passOut(outOrdersId,ordersObj,event){
    // 修改订单集合的 状态
    // console.log(11,_id,222,b);
      let data = await this.passoutState({_id:ordersObj._id,outOrdersState:2});
      
     let data2 = await this.modifyOutOrdersState({_id:outOrdersId,outOrdersState:2});
     if(data2.status){
       alert('已通过')
       this.getOutOrders();
      
     }
   },
   async notPassOut(outOrdersId,ordersObj,event){
       let data = await this.passoutState({_id:ordersObj._id,outOrdersState:3});
      let data2 =await this.modifyOutOrdersState({_id:outOrdersId,outOrdersState:3});
      if(data2.status){
          alert('已拒绝')
       this.getOutOrders();
       
     }
   }
    
  },
};
</script>

<style></style>
